/*
 * @Description: 详细的车票组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:30:26
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-28 23:44:14
 */
<template>
  <div
    class="ticket_main flex-hsb"
    :class="[selected?'selected_ticket':'',ticket.HAS_TICKET>0?'default_ticket_bg':'disabled_ticket_bg']"
  >
    <div class="ticket_info flex-h">
      <div
        class="left_remark"
        :class="ticket.HAS_TICKET|leftMarkBackground"
      ></div>
      <div class="info flex1">
        <div class="time fontsize38">{{ticket.DEPART_TIME}}</div>
        <!-- <div class="surplus fontsize28">{{ticket.CAN_SELL_SEAT_COUNT>0?'余票'+ticket.HAS_TICKET+'张':'无票'}}</div> -->
        <div class="surplus fontsize28">{{ticket.CAN_SELL_SEAT_COUNT | canSellSeatCountFilters(ticketDateType)}}</div>
      </div>
      <div class="price">
        <div
          v-if="ticket.HAS_DISCOUNT > 0"
          class="discount"
        >
          <p class="discount_info fontsize32">{{ticket.DISCOUNT_DESC}}</p>
          <p class="price_info fontsize24">
            <span class="original_price">￥{{ticket.TICKET_PRICE | priceFilters}}</span>
            <span class="discount_price">￥{{ticket.DISCOUNT_PRICE | priceFilters}}</span>
          </p>
        </div>
        <div
          v-else
          class="original fontsize38"
        >￥{{ticket.TICKET_PRICE | priceFilters}}</div>
      </div>
    </div>
    <div
      v-if="daysList.length > 0"
      class="more_info"
    >
      <div
        class="show_more"
        :style="{height: (this.more.state ? showMoreHeight : '0')}"
      >
        <div class="ticket_info_area flex-h flex-hsb flex-hw">
          <div
            v-for="(day, index) in daysList"
            :key="index"
            class="day_ticket"
            :class="day.DAY ? '' : 'empty_day'"
          >
            <h3 class="fontsize28">{{day.DAY}}</h3>
            <p class="fontsize24">{{day.CAN_SELL_SEAT_COUNT | showTicket}}</p>
          </div>
        </div>
        <p class="msg">*所选日期内，如遇无票情况将无法购买</p>
      </div>
      <div
        class="hide_more fontsize24"
        @click="toggleMoreInfo"
      >
        <span>{{more.msg}}</span>
        <i
          class="iconfont icon-downangel fontsize24"
          :class="more.state ? 'up_angle' : ''"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
import { priceFilters } from '@/wx/customizedShuttleBus/filters/filters'
export default {
  props: {
    ticket: {
      type: Object,
      default: null
    },
    selected: false,
    ticketDateType: {// 票日期类型
      type: Number,
      default: 1
    }
  },
  watch: {
    ticket(newVal, oldVal) {
      this.ticket = newVal
      this.getTicketDays()
    }
  },
  data() {
    return {
      more: { // 详情提示文字与详情伸缩状态
        msg: '展开发车详情',
        state: false
      },
      daysList: [], // 日期数据
      showMoreHeight: 0 // 存储详情高度，用于动画
    }
  },
  mounted() {
    this.getTicketDays()
  },
  methods: {
    toggleMoreInfo() { // 切换详情伸缩状态
      this.more.state = !this.more.state
      this.more.msg = this.more.state ? '收起发车详情' : '展开发车详情'
    },
    // 获取车辆班次中的日期和余票
    getTicketDays() {
      this.daysList = this.ticket.DAY_LIST || []
      if (this.daysList.length > 0) {
        this.more.state = false
        this.more.msg = '展开发车详情'
        let daysLack = 7 - this.daysList.length % 7 > 6 ? 0 : 7 - this.daysList.length % 7
        for (let i = 0; i < daysLack; i++) { // 当前时期长度不是7的倍数时将其补满，便于flex布局
          this.daysList.push({
            CAN_SELL_SEAT_COUNT: '',
            DAY: '',
            HAS_TICKET: ''
          })
        }
        let daysLen = parseInt(this.daysList.length / 7)
        let size = parseFloat(document.getElementsByTagName('html')[0].style.fontSize)
        console.log(daysLen, size)
        this.showMoreHeight = daysLen * 1.746667 * size + 5 + 'px' // 计算详情高度，用于动画实现
      }
    }
  },
  filters: {
    // 票价过滤器
    priceFilters,
    // 余票展示过滤器
    showTicket(num) {
      if (num.toString().length > 0) {
        if (num > 0) {
          return '有票'
        }
        return '无'
      }
      return ''
    },
    tickectBackground(val) { // 背景颜色过滤器
      if (val > 0) {
        return 'default_ticket_bg'
      } else {
        return 'disabled_ticket_bg'
      }
    },
    leftMarkBackground(val) { // 过滤票item左侧标记颜色
      if (val > 0) {
        return 'default_remark_bg'
      } else {
        return 'disabled_remark_bg'
      }
    },
    selectedTicket(val) {
      if (val) {
        return 'selected_ticket'
      } else {
        return ''
      }
    },
    canSellSeatCountFilters(count, ticketDateType) {
      if (count > 0) {
        if (ticketDateType === 1) { // 票(日期)类型（1.日票 2.周票 3.月票）
          return '余票' + count + '张'
        } else {
          return '有票'
        }
      } else {
        return '无票'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ticket_main {
  width: 686px;
  margin: auto;
  margin-top: 32px;
  border-radius: 4px; /*no*/
  // background-color: #f2f5f6;
  .ticket_info {
    transition: all 0.5s;
    padding: 20px 0;
    .left_remark {
      width: 10px;
      height: 28px;
      margin-top: 2px;
      // background-color: #027aff;
    }
    .info {
      min-width: 138px;
      padding-left: 38px;
      .time {
        height: 56px;
        line-height: 50px;
      }
      .surplus {
        height: 40px;
        line-height: 40px;
        color: #666;
      }
    }
    .price {
      max-width: 468px;
      padding-right: 32px;
      text-align: right;
      .original {
        height: 96px;
        line-height: 96px;
        color: #027aff;
      }
      .discount {
        .discount_info {
          height: 56px;
          line-height: 50px;
          color: #027aff;
        }
        .price_info {
          height: 40px;
          line-height: 45px;
          .original_price {
            color: #999;
            text-decoration: line-through;
            padding-right: 28px;
          }
          .discount_price {
            color: #e84d38;
          }
        }
      }
    }
  }
  .more_info {
    margin-top: -14px;
    border-radius: 4px; /*no*/
    .hide_more {
      height: 32px;
      line-height: 32px;
      text-align: center;
      color: #027aff;
      padding-bottom: 8px;
      i {
        width: 32px;
        height: 32px;
        display: inline-block;
        margin-left: 10px;
        // transition: all 0.5s;
        position: relative;
        top: 2px;
      }
      .up_angle {
        transform: rotate(180deg);
      }
    }
    .show_more {
      height: 0;
      padding: 0 32px;
      overflow: hidden;
      // transition: all 0.1s;
      .msg {
        color: #666;
        padding-bottom: 20px;
      }
      .ticket_info_area {
        .day_ticket {
          width: 80px;
          text-align: center;
          background-color: #fff;
          border-radius: 4px; /*no*/
          margin-bottom: 18px;
          h3 {
            height: 48px;
            line-height: 60px;
            color: #027aff;
          }
          p {
            height: 40px;
            line-height: 40px;
            color: #666;
          }
        }
        .empty_day {
          background-color: transparent;
        }
      }
    }
  }
}
.selected_ticket {
  border: 2px solid #027aff;
}
.default_ticket_bg {
  background-color: #f2f5f6;
}
.disabled_ticket_bg {
  background-color: #eeeeee;
}
.default_remark_bg {
  background-color: #027aff;
}
.disabled_remark_bg {
  background-color: #999999;
}
</style>
